<template>
  <div id="app">
    <van-nav-bar
      title="智能客服"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="messages" ref="message">
      <div v-for="(item, i) in dataInfo" :key="i" class="w">
        <div v-if="!item.isUser" class="u">
          <div class="chart-item">
            <div style="font-size: 0.8em; padding-left: 10px">
              {{ item.aid }}
            </div>
            <div class="user-face">
              <img src="../../public/img/kf.jpg" alt="" />
            </div>

            <div class="user-message">{{ item.info }}</div>
          </div>
        </div>
        <div v-if="item.isUser" class="a">
          <div class="chart-item">
            <div
              style="font-size: 0.8em; text-align: right; padding-right: 10px"
            >
              {{ item.uid }}
            </div>
            <div class="user-message">{{ item.info }}</div>
            <div class="user-face" v-if="$store.state.user.loginStatus">
              <img :src="urlSrcShow" alt="" />
            </div>
            <div class="user-face" v-if="!$store.state.user.loginStatus">
              <img src="../../public/img/yh.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-field v-model="info" @keyup.enter="send" center clearable>
      <template #button>
        <van-button size="small" type="primary" @click="send">发送</van-button>
      </template>
    </van-field>
  </div>
</template>

<script>
import io from "../../node_modules/socket.io/client-dist/socket.io.js";
import { mapState } from "vuex";

export default {
  name: "App",
  data() {
    return {
      info: "",
      dataInfo: [],
      socket: null,
    };
  },
  computed: {
    ...mapState("user", [
      "loginStatus",
      "userInfo",
      "urlSrcAdd",
      "urlSrcDefaul",
    ]),
    urlSrcShow() {
      if (!this.userInfo.avatarDef) {
        console.log(`${this.urlSrcAdd}${this.userInfo.avatar}`);
        return `${this.urlSrcAdd}${this.userInfo.avatar}`;
      } else {
        console.log(this.urlSrcDefaul);
        return this.urlSrcDefaul;
      }
    },
  },
  methods: {
    onClickLeft() {
      this.socket.close();
      this.$router.go(-1);
    },
    send() {
      let infoObj = {
        info: this.info,
        isUser: true,
        uid: this.userInfo.nickName,
        sid: "游客",
      };
      if (!this.loginStatus) {
        infoObj.uid = infoObj.sid;
        console.log(infoObj.uid);
      }
      console.log(this.loginStatus);
      // 去除文本框前后空格
      let val = this.info.trim();
      if (val.length > 0) {
        this.socket.emit("userInfo", infoObj);
        this.dataInfo.push(infoObj);

        // 将滚动条拉倒最底部
        this.$nextTick(() => {
          this.$refs.message.scrollTop = this.$refs.message.scrollHeight;
        });
        this.info = "";
      }
    },
  },
  mounted() {
    this.socket = io("http://127.0.0.1:9999");
    this.socket.on("connect", () => {
      this.socket.on("adminInfoServer", (infoObj) => {
        this.dataInfo.push(infoObj);
      });
    });
  },
};
</script>

<style scope>
.van-nav-bar__content {
  background-color: #36c14c;
  height: 7vh !important;
}
.van-icon-arrow-left:before {
  color: #fff;
}
.van-nav-bar__text {
  color: #fff !important;
}
.van-nav-bar__title {
  color: #fff !important;
}

.messages {
  border-bottom: 1px solid skyblue;
  width: 100%;
  height: 85vh;
  overflow: auto;
  background-color: #f5f5f5;
}
.u {
  display: flex;
  justify-content: flex-start;
}
.chart-item::after,
.chart-item::before {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.chart-item {
  margin-bottom: 10px;
}

.chart-item .user-face {
  float: left;
  margin: 0 10px;
}

.chart-item .user-face img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
.chart-item .user-message {
  position: relative;
  float: left;
  padding: 10px;
  max-width: 55vw;
  word-break: break-all;
  background: skyblue;
  font-size: 14px;
  border-radius: 3px;
}
.u .chart-item .user-message {
  margin-left: 10px;
}
.a .chart-item .user-message {
  margin-right: 10px;
  background-color: #95ec69;
}
.chart-item .user-message::before {
  content: " ";
  position: absolute;
  width: 10px;
  height: 10px;
  background: skyblue;
  top: 10px;
  z-index: 222;
  transform: rotate(45deg);
}
.u .chart-item .user-message::before {
  left: -5px;
}
.a .chart-item .user-message::before {
  background: #95ec69;
  right: -5px;
}
.a {
  display: flex;
  justify-content: flex-end;
}
</style>
